import { reactive } from "vue"
export const validateCaptcha = (rule, value, callback) => {
    if (value.length < 5) {
        callback(new Error('验证码不能小于5位数'))
    } else {
        callback()
    }
}
//检验用户名
export const validateUsername = (rule, value, callback) => {
    //用户名正则，3到16位（字母，数字，下划线，减号）
    let regUsername = /^[a-zA-Z0-9_-]{3,16}$/;
    //如果检验通过，直接回调calback()
    //如果检验不通过，calback中传参数
    if (regUsername.test(value)) {
        callback()
    } else {
        callback(new Error('用户名需为3~16位字母、数字、下划线'))
    }
}
//检验密码
export const validatePassword = (rule, value, callback) => {
    let regPassword = /^[a-zA-Z0-9_-]{3,16}$/;
    //如果检验通过，直接回调calback()
    //如果检验不通过，calback中传参数
    if (regPassword.test(value)) {
        callback()
    } else {
        callback(new Error('请输入3~16位字母、数字、下划线的密码'))
    }
}

//检验手机号
export const validatePhone = (rule, value, callback) => {
    let regCode = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    if (regCode.test(value)) {
        callback()
    } else {
        callback(new Error('手机号格式不正确'))
    }
}
//检验手机验证码
export const validateCode = (rule, value, callback) => {
    if (value.length < 5) {
        callback(new Error('验证码最少五位'))
    } else {
        callback()
    }
}


//检验规则
//校验常规登入的验证规则
export const commonRules = reactive({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
    captcha: [{ validator: validateCaptcha, trigger: 'blur' }],
})

//校验手机登入的验证规则
export const smsRules = reactive({
    phone: [{ validator: validatePhone, trigger: 'blur' }],
    code: [{ validator: validateCode, trigger: 'blur' }],
})

//表单提交的时候
/**
 * 
 * @param {Object} formEl 表单引用的对象
 * @param {Function} successCallback 表单校验通过的回调函数
 * @param {Function} faildCallback 表单检验失败的回调函数
 */
export const useSubmitForm = (successCallback, faildCallback) => (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            if (successCallback) {
                successCallback()
            }
            console.log('submit!')
        } else {
            if (faildCallback) {
                faildCallback(false)
            }
            // console.log('error submit!')

            return false
        }
    })
}
